<template>
  <div class="personal-wrap">
    <el-dialog
      v-loading="loading"
      element-loading-text="正在签署合同..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      custom-class="personal-dialog"
      :visible.sync="personDialogFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :fullscreen="true"
      :show-close="false"
    >
      <div class="explain-top">
        <div class="explain-top-content">
          <h1>云木屋</h1>
          <span>签署合同</span>
        </div>
      </div>
      <div class="personal-dialog-content">
        <div v-show="stepNum<4" class="dialog-step">
          <div class="step-item step-one step-active">
            <span>1</span>
            <p>签署合同</p>
          </div>
          <div class="step-item step-two" :class="{'step-active':stepNum > 1 }">
            <span>2</span>
            <p>平台审核</p>
          </div>
          <div class="step-item step-three" :class="{'step-active':stepNum > 2}">
            <span>3</span>
            <p>审核成功</p>
          </div>
        </div>
        <!-- 签署合同 -->
        <div v-if="stepNum==1" class="personal-form">
          <img src="@/assets/authentication/contract1.png" alt />
          <h1>签署合同</h1>
          <p>需要您在线签署合同，签署合同后继续等待平台审核</p>
          <el-button @click="_doSign">立即签署</el-button>
          <p @click="_doCreate">预览合同 ></p>
        </div>
        <!-- 平台审核中 -->
        <div v-else-if="stepNum==2" class="personal-form">
          <img src="@/assets/authentication/contract3.png" alt />
          <h1>平台审核中</h1>
          <p class="width-p">您的申请已提交，请耐心等待平台审核！ 如有疑问请联系：400-156-8818</p>
        </div>

        <!-- 审核成功 -->
        <div v-else-if="stepNum==3" class="personal-form">
          <img class="success-img" src="@/assets/icon-success.png" alt />
          <h1>审核通过</h1>
          <p class="success-p">
            恭喜你成功加入云木屋，
            <span>{{second}}秒</span> 后自动跳转
          </p>
          <el-button @click="toHome">立即前往</el-button>
        </div>

        <!-- 平台审核失败 -->
        <div v-else-if="stepNum==4" class="personal-form stepNum-failed">
          <img src="@/assets/authentication/contract4.png" alt />
          <h1>审核失败</h1>
          <el-button @click="_agentAgain">重新签署</el-button>
        </div>

        <!-- 平台审核异常 -->
        <div v-else-if="stepNum==5" class="personal-form stepNum-failed">
          <img class="success-img" src="@/assets/icon-fail.png" alt />
          <h1>审核异常</h1>
          <el-button @click="_agentAgain">重新签署</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  checkSign,
  doCreate,
  doSign,
  viewSign,
  agentAgain,
  ssqCheck
} from "@/api/authentication";
export default {
  data() {
    return {
      personDialogFlag: true,
      stepNum: 1,
      second: 5,
      loading: false
    };
  },
  mounted() {
    this._ssqCheck();
    // this._checkSign();
    // this.stepNum = 5;
  },
  methods: {
    // 上上签检测
    _ssqCheck() {
      ssqCheck().then(res => {
        if (res.code == 10033) {
          this._checkSign();
        } else {
          this.$message.error("尚未开通电子合同服务，正在前往开通...");
          setTimeout(() => {
            this.$router.push({ name: "contractServices" });
          }, 1000);
        }
      });
    },
    // 检测是否代理商接口
    _checkSign() {
      checkSign().then(res => {
        if (res.code == 1001) {
          this.stepNum = 1;
        } else if (res.code == 1002) {
          this.stepNum = 2;
        } else if (res.code == 1003) {
          this.stepNum = 4;
        } else if (res.code == 1004) {
          this.stepNum = 5;
        } else if (res.code == 1) {
          this.stepNum = 3;
          let interval = setInterval(() => {
            if (this.second > 0) {
              this.second--;
            } else {
              clearInterval(interval);
              this.$router.push({ name: "homepage" });
            }
          }, 1000);
        }
      });
    },
    // 代理协议生成
    _doCreate() {
      doCreate().then(res => {
        if (res.code == 1) {
          window.open(res.data.contract_url);
        } else if (res.code == 10088) {
          this.$message.error(
            res.msg || "尚未开通电子合同服务，正在前往开通..."
          );
          setTimeout(() => {
            this.$router.push({ name: "contractServices" });
          }, 1000);
        }
      });
    },
    // 代理协议签署
    _doSign() {
      this.loading = true;
      doCreate().then(res => {
        console.log("代理协议生成res", res);
        if (res.code == 1) {
          doSign().then(res => {
            console.log("签署合同res", res);
            if (res.code == 1) {
              this.loading = false;
              this.stepNum = 2;
              this.$message.success("合同签署成功");
              setTimeout(() => {
                // window.open(res.data.contract_url);
                window.location.reload();
              }, 1500);
            } else {
              this.loading = false;
              this.$message.error(res.msg || "请求失败");
            }
          });
        } else {
          this.loading = false;
          this.$message.error(res.msg || "请求失败");
        }
      });
    },

    // 代理协议查看
    _viewSign() {
      viewSign().then(res => {
        if (res.code == 1) {
          window.open(res.data.contract_url);
        }
      });
    },

    // 审核失败->重新成为代理商
    _agentAgain() {
      agentAgain().then(res => {
        if (res.code == 1) {
          this._checkSign();
        }
      });
    },
    // 去首页
    toHome() {
      this.$router.push({ name: "homepage" });
    }
  }
};
</script>

<style lang='scss'>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      .personal-form {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .el-input__inner {
                width: 300px;
              }
            }
          }
        }
        &.stepNum-failed {
          margin-top: 200px;
        }
      }
    }
  }
}
</style>


<style lang='scss' scoped>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;

    .explain-top {
      height: 60px;
      border-bottom: 1px solid #f1f1f1;
      box-shadow: 0px 2px 5px #f1f1f1;
      background: #fff;
      .explain-top-content {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        h1 {
          display: inline-block;
          line-height: 60px;
          font-size: 30px;
          font-weight: bold;
          background-image: linear-gradient(0deg, #ff9303 0%, #fe6018 100%);
          -webkit-background-clip: text;
          color: transparent;
          margin: 0;
        }
        span {
          display: inline-block;
          vertical-align: top;
          margin-left: 30px;
          font-size: 16px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          position: absolute;
          top: 50%;
          left: 80px;
          transform: translateY(-50%);
        }
      }
    }
    .personal-dialog-content {
      width: 1200px;
      min-height: 700px;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
      margin-top: 20px;
      .dialog-step {
        width: 50%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 80px;
        margin-bottom: 70px;
        .step-item {
          width: 130px;
          font-size: 16px;
          span {
            padding: 2px 15px;
            background: #bcbcbc;
            border-radius: 11px;
            color: #fff;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              left: -90px;
            }
            &::after {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              right: -90px;
            }
          }
          p {
            color: #bcbcbc;
          }
          &.step-active {
            span {
              background: #ff7f5b;
              &::after {
                background: #ff7f5b;
              }
              &::before {
                background: #ff7f5b;
              }
            }
            p {
              color: #ff7f5b;
            }
          }
          &:first-of-type {
            span {
              &::before {
                display: none;
              }
              &::after {
                background: #ff7f5b;
              }
            }
          }
          &:last-of-type {
            span {
              &::after {
                display: none;
              }
            }
          }
        }
      }
      .personal-form {
        text-align: center;
        img {
          width: 112px;
          height: 93px;
          &.success-img {
            width: 80px;
            height: 100px;
          }
        }
        h1 {
          font-size: 20px;
          font-weight: bold;
          color: #111;
          line-height: 0;
          margin: 35px 0 25px 0;
        }
        p {
          font-size: 14px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 24px;
          margin: 0 auto;
          margin-bottom: 30px;
          &:nth-of-type(2) {
            cursor: pointer;
          }
          &.width-p {
            width: 252px;
          }
          &.success-p {
            font-size: 16px;
            span {
              color: #ff7f5b;
            }
          }
        }
        .el-button {
          width: 130px;
          height: 40px;
          border-color: #ff7f5b;
          color: #ff7f5b;
          margin-bottom: 20px;
        }
      }
      .personal-setPassword {
        text-align: center;
        font-size: 16px;
        color: #404040;
        margin-top: 200px;
        cursor: pointer;
      }
      .personal-result {
        text-align: center;
        img {
          width: 80px;
          height: 100px;
          margin: 110px 0 20px 0;
        }
        h1 {
          font-size: 20px;
          font-weight: bold;
          color: #111;
          margin-bottom: 30px;
        }
        p {
          font-size: 16px;
          font-weight: 400;
          color: #999;
          cursor: pointer;
        }
      }
    }
  }
}
</style>